<template>
	<view class="order">
		<view class="header">
			<view class="l li" @click="sortChange('order')">
				<view
					class="text"
					:class="{
						active: sort_type == 'order'
					}"
				>
					订单排序
				</view>
				<!-- <view class="icon">
					<u-icon name="arrow-up" v-if="goods_sort == 'asc'"></u-icon>
					<u-icon name="arrow-down" v-else></u-icon>
				</view> -->
			</view>
			<view class="r li" @click="sortChange('name')">
				<view
					class="text"
					:class="{
						active: sort_type == 'name'
					}"
				>
					名称排序
				</view>
				<!-- <view class="icon">
					<u-icon name="arrow-up" v-if="order_sort == 'asc'"></u-icon>
					<u-icon name="arrow-down" v-else></u-icon>
				</view> -->
			</view>
			<view class="r li" @click="sortChange('cate')">
				<view
					class="text"
					:class="{
						active: sort_type == 'cate'
					}"
				>
					类别和名称
				</view>
				<!-- <view class="icon">
					<u-icon name="arrow-up" v-if="order_sort == 'asc'"></u-icon>
					<u-icon name="arrow-down" v-else></u-icon>
				</view> -->
			</view>
		</view>
		<view class="item_right">
			<scroll-view :scroll-y="true" class="right_view">
				<view class="item_right_li" v-for="(item, index) in dataList" :key="index" :class="{ telhcgl: item.telhcgl && item.telhcgl.indexOf('_取消') == -1}">
					<view class="logo">
						<u--image :src="item.sbjbbh + '.jpg'" width="180rpx" height="140rpx"></u--image>
					</view>
					<view class="con">
						<view class="title" style="display: flex; justify-content: space-between; margin-bottom: 10rpx">
							<view class="t">{{ item.sbjbmz }}</view>
							<view class="ry">{{ item.fwry }}</view>
						</view>
						<!-- <view class="sale">单位:{{ item.sbjbjldw }}</view> -->

						<view class="price">
							<view class="l">¥{{ item.ssje01 }}</view>
							<view class="r">
								<u-number-box disabled step="1" decimalLength="1" v-model="item.sssl" asyncChange :name="index" :min="0" @change="ChangeVal"></u-number-box>
							</view>
							<!-- <view class="r" else @click="item.number++">
								<u-icon name="plus-circle" size="24"></u-icon>
							</view> -->
						</view>
						<view class="sale" v-if="!item.smbz"></view>
						<view class="sale" v-else>口味：{{ item.smbz }}</view>
						<view class="sale sale1" v-if="item.telhcgl" @click="selectClick(item)">划菜：{{ item.telhcgl }}</view>
						<view class="sale sale1" v-else @click="selectClick(item)">划菜</view>
					</view>
				</view>

				<view class="total">
					<view>数量：{{ totalCount.number }}</view>
					<view class="">金额：{{ totalCount.price }}</view>
				</view>
				<view style="height: 200rpx"></view>
			</scroll-view>
		</view>
		<viwe class="tag">
			<view class="tag_li"></view>
		</viwe>
		<view class="footer">
			<view class="footer_li" @click="close">关闭</view>
		</view>
		<u-overlay :show="showsmbzInfo">
			<view class="warp">
				<view class="warp_con">
					<view class="btn">
						<u-button class="btn_li" :text="item.smbz" v-for="(item, index) in kwList" :key="index" @click="clickBtn(item)"></u-button>
					</view>
					<view class="textarea">
						<u-textarea v-model="smbz" height="50" placeholder="请输入内容" @change="changeText"></u-textarea>
					</view>
					<view class="footer">
						<view class="btn_li">
							<u-button text="单个添加" @click="changeAdd('one')" type="primary" size=""></u-button>
						</view>
						<view class="btn_li">
							<u-button text="全部添加" @click="changeAdd('all')" type="success" size=""></u-button>
						</view>
						<view class="btn_li">
							<u-button text="关闭" @click="closeTag" size=""></u-button>
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dataList: [],
			zzmz: 0,
			kwList: [],
			smbz: '',
			selectTag: [],
			showsmbzInfo: false,
			itemList: [],
			type: '走菜',
			totalCount: {
				number: 0,
				price: 0
			},
			sort_type: 'order'
		};
	},
	watch: {},
	onLoad({ zzmz }) {
		if (zzmz) {
			this.zzmz = zzmz;
			uni.setNavigationBarTitle({
				title: zzmz + '的账单'
			});
		}

		this.getInfo();
		this.getKw();
	},
	methods: {
		gettelhcgl(item) {
			let _this = this;
			_this
				.$http('order/telhcgl', {
					...item
				})
				.then((res) => {
					if (res.code) {
						uni.$u.toast('成功');
						this.getInfo();
					} else {
						uni.$u.toast(res.msg);
						this.getInfo();
					}
				});
		},
		selectClick(item) {
			let _this = this;
			if (!item.telhcgl) {
				uni.showModal({
					content: '您确定划菜:' + item.sbjbmz + ' 吗？',
					showCancel: true,
					success(btn) {
						if (btn.confirm) {
							_this.gettelhcgl(item);
						}
					}
				});
			} else if (item.telhcgl && item.telhcgl.indexOf('划菜')) {
				uni.showModal({
					content: '您确定取消:' + item.sbjbmz + ' 划菜吗？',
					showCancel: true,
					success(btn) {
						if (btn.confirm) {
							_this.gettelhcgl(item);
						}
					}
				});
			} else {
				uni.showModal({
					content: '您确定划菜:' + item.sbjbmz + ' 吗？',
					showCancel: true,
					success(btn) {
						if (btn.confirm) {
							_this.gettelhcgl(item);
						}
					}
				});
			}
		},
		sortChange(type) {
			if (type == this.sort_type) {
				return;
			}
			this.sort_type = type;
			this.getInfo();
		},
		close() {
			uni.reLaunch({
				url: '/pages/index/index'
			});
		},
		totalCountInfo() {
			let number = 0;
			let price = 0;
			this.dataList.forEach((item) => {
				number += item.sssl * 1;
				price += item.ssje * 1;
			});
			this.totalCount = {
				number,
				price
			};
		},
		confirm() {
			let _this = this;
			uni.showLoading({
				title: '等稍后',
				mask: true
			});
			_this
				.$http('order/confirm', {
					zzmz: _this.zzmz,
					type: _this.type
				})
				.then((res) => {
					uni.hideLoading();
				});
		},
		Clickshowsmbz(item) {
			this.itemList = item;
			if (item.smbz) {
				this.selectTag = item.smbz.split(',');
				this.smbz = item.smbz;
				this.showsmbzInfo = true;
			} else {
				this.selectTag = [];
				this.showsmbzInfo = true;
			}
		},
		changeAdd(type = 'add') {
			let _this = this;
			this.$http('order/updateTag', {
				zzmz: _this.zzmz,
				..._this.itemList,
				l_type: type,
				smbz: _this.smbz
			}).then((res) => {
				if (res.code) {
					this.showsmbzInfo = false;
					_this.getInfo();
				}
			});
		},
		closeTag() {
			this.selectTag = [];
			this.smbz = '';
			this.showsmbzInfo = false;
		},
		changeText(e) {
			if (!e) {
				this.selectTag = [];
			}
		},
		clickBtn(row) {
			let _this = this;
			console.log(row);
			_this.selectTag.push(row.smbz);
			_this.smbz = _this.selectTag.join(',');
		},
		getKw() {
			let _this = this;
			_this.$http('order/smbz', {}).then((res) => {
				if (res.code) {
					this.kwList = res.data;
				}
			});
		},
		getInfo() {
			let _this = this;
			_this
				.$http('order/getOrder', {
					zzmz: _this.zzmz,
					sort_type: _this.sort_type
				})
				.then((res) => {
					if (res.code) {
						this.dataList = res.data;
						_this.totalCountInfo();
					}
				});
		},
		ChangeVal(e) {
			let _this = this;
			uni.showLoading({
				title: '请稍后'
			});
			let item = this.dataList[e.name];
			_this
				.$http('order/changeNumber', {
					...item,
					number: e.value,
					zzmz: _this.zzmz
				})
				.then((res) => {
					uni.hideLoading();
					this.getInfo();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.telhcgl {
	background-color: #cccccc;
	.sale1 {
		color: #ff6700 !important;
	}
}
.header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	padding: 20rpx 0;
	.li {
		display: flex;
		align-items: center;
		.active {
			color: #ff6700;
		}
	}
}
.total {
	display: flex;
	justify-content: space-between;
	width: 94.7%;
	margin: 0 auto;
	margin-top: 20rpx;
}
.type {
	width: 94.7%;
	margin: 0 auto;
	margin-top: 20rpx;
	display: flex;
}
.footer {
	position: fixed;
	bottom: 0;
	background: linear-gradient(45deg, #ff6700, orange);
	width: 100%;
	&_li {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 24rpx 0;
		color: #fff;
	}
}
.warp {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	.warp_con {
		width: 560rpx;
		height: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.btn {
			display: flex;
			padding: 24rpx;
			flex-wrap: wrap;
			height: 300rpx;
			overflow: auto;
			&_li {
				width: 160rpx;
			}
		}
		.textarea {
		}
		.footer {
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: space-around;
			align-items: center;
			.btn_li {
				// border: 1rpx solid #ccc;
				text-align: center;
			}
		}
	}
}
.item_right {
	flex: 1;
	&_li {
		flex: 1;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		.logo {
			margin-right: 20rpx;
		}
		.con {
			flex: 1;
		}
		.title {
			flex: 1;
		}
		.sale {
			flex: 1;
			font-size: 28rpx;
			color: #747474;
		}
		.price {
			flex: 1;
			display: flex;
			justify-content: space-between;
		}
	}
}
</style>
